import React, { Component } from "react"
// 引入css样式
import "./index.css"
class Todo1 extends Component{
    constructor(){
        super()
        this.state={
            inputvalue:"", 
           todo1s:[
            {id:1,name:"111",ischeck:true},
            {id:2,name:"222",ischeck:false},
            {id:3,name:"333",ischeck:true},
            {id:4,name:"444",ischeck:false},
           ]
        }
          
        
    }
    onChange=(event)=>{
       
       this.setState({
        
        inputvalue:event.target.value
       })
    }

    addItem=()=>{
        this.setState({
            todo1s:[...this.state.todo1s,{id:this.state.todo1s.length+1,name:this.state.inputvalue,ischeck:false}],
            inputvalue:""
        })
    }
    styleChange=(id)=>{

        
        
        // this.newlist=this.state.todo1s.map((item,index)=>{
        //     if(item.id==id){
        //         item.ischeck=true
        //         return item
        //     }
        // })
        // console.log(this.newlist);
        const newlist = this.state.todo1s.map(item => {

            if(item.id==id){
                item.ischeck = !item.ischeck
            }
            // return item
        })
        this.setState({
            ...this.state,
            todos:newlist
        })
    } 
    ischeckNums=()=>{
      return  this.state.todo1s.filter((item)=>item.ischeck).length
    }
    render(){
       
        return(
          <>
          <div>总数:{this.state.todo1s.length}已完成:{this.ischeckNums()}未完成:{this.state.todo1s.length-this.ischeckNums()}</div>
          <hr />
          <input type="text" value={this.state.inputvalue} onChange={this.onChange} />
          <button style={{margin:"10px"}} onClick={this.addItem.bind(this)} >添加</button>
          <ul>
             {
              this.state.todo1s.map((item,index)=>{
                   return <li key={item.id} className={item.ischeck?'gren':''} onClick={()=>{
                    this.styleChange(item.id)
                    // const newlist=this.state.todo1s.map((t)=>t.id==item.id?{...t,ischeck:!t.ischeck}:t
                // );
                // this.setState({todo1s:newlist})
            }}>{item.name}</li>
              })  
                
             }

          </ul>
           
          </>
        )
    }
}

export default Todo1